import React from "react";
import { Handle, Position } from "react-flow-renderer";
import { NodeProps } from "..";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import EditMenu from "../EditMenu";
import style from "./index.module.less";

const Branch = (props: NodeProps) => {
  const { id } = props;
  const { flowData } = useSelector((state: RootState) => state.diagram);
  const currentNode = flowData?.get(id) || {};
  return (
    <div className={style.container}>
      <div className={style.main}>
        <div className={style.label}>{currentNode.label}</div>
        <div className={style.menu}>
          <EditMenu node={props}></EditMenu>
        </div>
      </div>
      <Handle
        type="target"
        position={Position.Bottom}
        style={{ borderRadius: 0, left: "100%" }}
        id="left"
      ></Handle>
      <Handle
        type="target"
        position={Position.Right}
        style={{ borderRadius: 0, right: "100%", top: "100%" }}
        id="top2"
      ></Handle>
      <Handle
        type="source"
        position={Position.Left}
        style={{
          borderRadius: 0,
          left: "0",
          top: "0",
        }}
        id="right"
      ></Handle>
      <Handle
        type="source"
        position={Position.Top}
        style={{ borderRadius: 0, left: "100%" }}
        id="bottom"
      ></Handle>
    </div>
  );
};
export default Branch;
